<script setup lang="ts">
import { ref, onBeforeMount, toRef, toRefs } from "vue"
import { RangePicker } from "../../../components"
import type { FilterRendererProps } from "../types"
import { useInjectCollapsibleFormContext } from "@/components/collapsible-form/context"

const props = defineProps<FilterRendererProps<any>>()

const { filter, value, onChange } = toRefs(props)

// 控制当前元素是否可见
const visible = ref<boolean>(true)

// 记录当前组件在列表中的索引
const selfIndex = ref<number>()

// 获取所有表单项
const formItems = useInjectCollapsibleFormContext()

function appendFormItem() {
  if (formItems) {
    // 获取当前元素的索引
    selfIndex.value = formItems.value.length

    // 插入当前元素的信息
    formItems?.value.push({
      span: toRef(() => filter.value.span),
      visible: visible,
    })
  }
}

onBeforeMount(appendFormItem)
</script>

<template>
  <RangePicker
    v-show="visible"
    class="pc-mb-4"
    :class="{
      [`pc-col-span-${filter.span}`]: true,
    }"
    :prefix="filter.label"
    :bordered="true"
    :modelValue="value"
    :placeholder="filter.placeholder"
    :valueFormat="filter.valueFormat"
    @update:modelValue="onChange"
  />
</template>
